<template>
  <div class="container">
    <el-card class="box-card card-main">
      <!-- 学科查询和搜索-->
      <el-form label-width="80px" size="small">
        <el-form-item label="学科名称" class="subName">
          <el-input class="form-leg" v-model="subName"></el-input>
          <el-button @click="subName = ''">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="success" class="addSub" @click="addSubjects"
            >🖊_新增学科</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 消息提示 -->
      <template>
        <el-alert type="info" show-icon :closable="false">
          数据一共{{ this.counts }}条
        </el-alert>
      </template>
      <!-- 表格展示  -->
      <template>
        <el-table :data="subData" style="width: 100%">
          <el-table-column type="index" width="100" label="序号">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="100">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="170">
            <template #default="scope">
              {{ formatDate(scope.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            width="130"
          >
            <template #default="scope">
              {{ formatFrontDisplay(scope.row.isFrontDisplay) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="{ row }">
              <el-button
                type="text"
                @click="$router.push({path :'/subjects/directorys' ,query : {id : row.id , name : row.subjectName }})"
                >学科分类</el-button
              >
              <el-button type="text" @click="$router.push({path :'/subjects/tags' , query : {id : row.id , name : row.subjectName }})"
                >学科标签</el-button
              >
              <el-button type="text" @click="edit(row.id)">修改</el-button>
              <el-button type="text" @click="delsub(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          background
          :current-page="this.params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="this.params.pagesize"
          layout="  prev, pager, next, sizes,jumper"
          :total="counts"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
      <!-- 新增弹框 -->
      <addsub
       :showDialog="showDialog"
        @closeDialog="closeDialog"
        @update-list="subTab"
        ref="addDepart"
        ></addsub>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import addsub from '../components/subjects-add.vue'
import { remove, Sublist as list } from '@/api/hmmm/subjects'

export default {
  components: {
    addsub
  },
  data () {
    return {
      subData: [],
      params: {
        page: 1,
        pagesize: 10
      },
      total: '',
      showDialog: false,
      counts: null,
      subName: ''
    }
  },
  mounted () {
    this.subTab()
  },
  methods: {
    // 渲染数据
    async subTab () {
      const res = await list(this.params)
      // console.log(res);
      this.counts = res.data.counts
      this.subData = res.data.items
    },
    // 时间格式化
    formatDate (value, str = 'YYYY-MM-DD hh:mm:ss') {
      return dayjs(value).format(str)
    },
    // 处理是否显示
    formatFrontDisplay (front) {
      const map = {
        1: '是',
        0: '否'
      }
      return map[front]
    },
    // 当前页
    currentchange (page) {
      // console.log(page);
      this.params.page = page
      this.subTab()
    },
    // 改变每一页的条数
    handleSizeChange (val) {
      this.params.pagesize = val
      this.subTab()
    },
    // 添加
    addSubjects () {
      this.showDialog = true
    },
    // 修改
    async edit (id) {
      this.showDialog = true
      this.$refs.addDepart.getDetail(id)
    },
    // 关闭弹框
    closeDialog () {
      this.showDialog = false
    },
    // 删除
    delsub (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.subTab()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索
    search () {
      const _subName = this.subName
      if (_subName) {
        let list = []
        list = this.subData.filter((item) => {
          return _subName.includes(...item.subjectName)
        })
        this.subData = list
      }
      this.subName = ''
    }
  }
}
</script>

<style scoped lang='scss'>
.card-main {
  margin: 20px 10px;
}
.form-leg {
  width: 230px;
  margin-right: 20px;
}
.subName {
  position: relative;
}
.addSub {
  position: absolute;
  top: 0;
  right: 0;
}
.el-pagination {
  text-align: right;
}
a {
  color: #409eff;
  margin-right: 5px;
}
</style>
